<template>
    <div style="height: 100vh;overflow: hidden;position: relative;">
        <div class="logo textColor">
            <img src="../assets/logo.png" style="width:38px;margin-right: 10px;user-select: none" alt="" srcset="">Vjie
            Admin Antd
        </div>
        <a-row style="height: 100%;display: flex;"
            :style="{ flexDirection: layout == 'left' ? 'row-reverse' : 'row', justifyContent: layout == 'center' ? 'center' : 'flex-start' }"
            :gutter="0">
            <a-col :xs="layout == 'center' ? 24 : 0" :sm="layout == 'center' ? 24 : 0"
                :md="layout == 'center' ? 24 : 14" :lg="layout == 'center' ? 24 : 16" :xl="layout == 'center' ? 24 : 16">
                <!-- :span="layout == 'center' ? 24 : 16" -->
                <div class="lbg">
                    <div class="glass" :style="{ padding: layout == 'center' ? '20px' : '' }">
                        <template v-if="layout !== 'center'"> <svg-icon icon-class="loginbg" class="ban" size="360" />
                            <div class="desc textColor" style="font-size: 24px;">开箱即用的大型中后台管理系统</div>
                            <div class="desc textColor" style="font-size: 18px;">工程化、高性能、跨组件库的前端模版</div>
                        </template>
                        <Login v-if="layout == 'center'" @layoutChange="layoutChange" @handleSubmit="handleSubmit"
                            :layout="layout"></Login>
                    </div>
                </div>
            </a-col>
            <a-col v-if="layout !== 'center'" :xs="24" :sm="24" :md="10" :lg="8" :xl="8">
                <!-- :span="8" -->
                <Login @handleSubmit="handleSubmit" @layoutChange="layoutChange" :layout="layout"></Login>
            </a-col>

        </a-row>
        <Vcode :show="isShow" @success="onSuccess" @close="isShow = false" />
    </div>
</template>

<script setup lang="ts">
import { THEME, subTextColor, bgColor, textColor, textPrimaryColor, gbgColor } from '@/composables/useTheme'
import Login from '@/components/login.vue'
//@ts-ignore
import Vcode from "vue3-puzzle-vcode";
import SvgIcon from '@/components/SvgIcon.vue'
const isShow = ref<boolean>(false);
const layoutChange = (e: string) => {
    layout.value = e as 'left' | 'right' | 'center'
}
const handleSubmit = (values: any) => {
    console.log(values)
}
const onSuccess = () => {
    isShow.value = false
};
const layout = ref<'left' | 'right' | 'center'>('right')


</script>

<style lang="scss">
.subTextColor {
    color: v-bind('`${subTextColor} `');
}

.textPrimaryColor {
    color: v-bind('`${textPrimaryColor} `');
}

.textColor {
    color: v-bind('`${textColor} `');
}

.bgColor {
    background-color: v-bind('`${bgColor} `');
}

.desc {
    margin-top: 8px;
    font-weight: bold;
}

.logo {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 9;
    width: 240px;
    height: 55px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    user-select: none;
}

.glass {
    width: 100%;
    height: 100%;
    /* 半透明背景 */
    backdrop-filter: blur(140px) saturate(180%);
    /* 模糊与饱和度 */
    -webkit-backdrop-filter: blur(140px) saturate(180%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .ban {
        animation: mymove 4s infinite;
        -webkit-animation: mymove 4s infinite;
    }
}

@keyframes mymove {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -10px);
    }

    100% {
        transform: translate(0px, 0px);
    }

}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -10px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

.lbg {
    width: 100%;
    height: 100%;
    background: v-bind('`${THEME.isDark ? `linear-gradient(135deg, #141414 48%, ${THEME.token.colorPrimary} 50%, #141414 52%)` : `linear-gradient(135deg, #e7e9ec 48%, ${THEME.token.colorPrimary} 50%, #e7e9ec 52%)`} `');
}

.b {
    position: absolute;
    right: 0px;
    top: 0;
    background-color: v-bind('`${gbgColor} `');
    width: 130px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    padding-left: 18px;
    height: 44px;
    transform: translateX(0px);
    transition: all 0.3s ease-in-out;
}



.capsule {
    position: absolute;
    right: 0px;
    top: 0;
    background-color: v-bind('`${gbgColor} `');
    width: 152px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}
</style>